import React from 'react';
import { Card, Descriptions } from 'antd';

// 这是一个推测的设备类型，如果实际类型不同，请进行替换
interface Device {
  name: string;
  id: number;
  productName?: string;
  status?: string;
  // 可根据需要添加其他属性
}

const DeviceInfoCard = ({ device }: { device: Device }) => {
  if (!device) {
    return null;
  }

  return (
    <Card title="设备信息" bordered={false}>
      <Descriptions column={2}>
        <Descriptions.Item label="设备名称">{device.name}</Descriptions.Item>
        <Descriptions.Item label="设备ID">{device.id}</Descriptions.Item>
        {device.productName && <Descriptions.Item label="产品名称">{device.productName}</Descriptions.Item>}
        {device.status && <Descriptions.Item label="设备状态">{device.status}</Descriptions.Item>}
      </Descriptions>
    </Card>
  );
};

export default DeviceInfoCard;
